<script setup>
// 1. 引入所需依赖
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import {useUserStore} from "@/stores/uerStore.js";

const userStore=useUserStore()

// 2. 路由实例（用于登录后跳转）
const router = useRouter()

// 3. 表单数据绑定（响应式）
const loginForm = reactive({
  username: 'dongdong', // 用户名
  password: '123456'  // 密码
})

// 4. 表单验证规则
const loginRules = reactive({
  // 用户名验证：必填 + 长度 2-10 位
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 2, max: 10, message: '用户名长度需在 2-10 位之间', trigger: 'blur' }
  ],
  // 密码验证：必填 + 长度 6-16 位
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 16, message: '密码长度需在 6-16 位之间', trigger: 'blur' }
  ]
})

// 5. 表单引用（用于调用验证方法）
const formRef = ref(null)

// 6. 登录核心逻辑
const handleLogin = async () => {
  // 第一步：触发表单验证
  const isValid = await formRef.value.validate()
  if (!isValid) return // 验证失败则终止

  // 第二步：模拟接口请求（实际项目替换为真实接口）
  try {
    // 这里仅做示例，实际需传递 loginForm 到后端
   // await new Promise(resolve => setTimeout(resolve, 800))
    // 登录成功：存储 token（实际用 localStorage/sessionStorage）
   // localStorage.setItem('token', 'fake-token-123456')


  /*  const res=await customerLogin(loginForm)
    console.log(res.data.data.token)
    // 登录成功：存储 token（实际用 localStorage/sessionStorage）
    localStorage.setItem('token', res.data.data.token)
    localStorage.setItem('userName', res.data.data.name)
    localStorage.setItem('userid', res.data.data.id)*/

    await userStore.getUserInfo(loginForm)
      // 提示用户并跳转（示例跳转到首页，可根据需求修改）
    ElMessage.success('登录成功！')
    router.replace('/') // push这个也可以 需确保路由表中存在 /home 路由

  } catch (error) {
    // 登录失败：捕获错误并提示
    ElMessage.error('登录失败，请检查用户名或密码')
    console.error('登录接口错误：', error)
  }
}
</script>

<template>
  <div class="login-container">
    <RouterView />
    <!-- 登录卡片 -->
    <div class="login-card">
      <h2 class="login-title">用户登录</h2>

      <!-- 表单：绑定数据、规则和引用 -->
      <el-form
          ref="formRef"
          :model="loginForm"
          :rules="loginRules"
          class="login-form"
      >
        <!-- 用户名输入框 -->
        <el-form-item label="用户名" prop="username">
          <el-input
              v-model="loginForm.username"
              type="text"
              placeholder="请输入用户名"
              clearable
          ></el-input>
        </el-form-item>

        <!-- 密码输入框 -->
        <el-form-item label="密码" prop="password">
          <el-input
              v-model="loginForm.password"
              type="password"
              placeholder="请输入密码"
              show-password
          ></el-input>
        </el-form-item>

        <!-- 操作按钮区 -->
        <el-form-item class="login-btn-group">
          <el-button
              type="primary"
              @click="handleLogin"
              class="login-btn"
              :loading="false"
          >
          登录
          </el-button>

          <!-- 跳转链接 -->
          <RouterLink to="/" class="browse-link">
            先逛一逛 →
          </RouterLink>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<style scoped>
/* 页面整体样式：居中布局 */
.login-container {
  width: 100vw;
  height: 100vh;
  background-color: #f5f7fa;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 登录卡片样式：白色背景 + 阴影 */
.login-card {
  width: 420px;
  padding: 36px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
}

/* 标题样式 */
.login-title {
  text-align: center;
  margin-bottom: 24px;
  color: #1f2937;
  font-size: 20px;
  font-weight: 600;
}

/* 表单样式：调整间距 */
.login-form {
  margin-top: 16px;
}

/* 按钮组样式：flex 布局 */
.login-btn-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}

/* 登录按钮样式：宽度自适应 */
.login-btn {
  width: 160px;
}

/* 跳转链接样式：调整颜色和 hover 效果 */
.browse-link {
  color: #409eff;
  text-decoration: none;
  font-size: 14px;
}
.browse-link:hover {
  color: #66b1ff;
  text-decoration: underline;
}
</style>